<template>
	<view class="content">
		<my-search-header v-model="keyword" :showRightBtn="false" @back="clickBack" placeholder="输入订单号或商品名称"
			:inputConfig="{disabled:true}" @click="toSearch">
			<text @click="clickShowFilter">筛选</text>
		</my-search-header>
		<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
			<!-- 空白页 -->
			<empty v-if="afterSaleList.length === 0"></empty>
			<view v-for="(item,index) in afterSaleList" :key="index">
				<view class="order-item" @click="toDetail(item)">
					<view class="i-top b-b">
						<image class="img" src="../../static/store.png" mode="aspectFill"></image>
						<view class="time">
							<text>{{item.supplierName}}</text>
							<online-service v-if="supplierCustomerGroup[item.supplierId]" @service="toService(item,item.supplierId)"></online-service>
						</view>
						<text class="yticon icon-shouhoutuikuan"></text>
						<text>{{typeData[item.type]}}</text>
						<text style="margin-left: 10rpx;">{{statusData[item.status]}}</text>
					</view>
					<view class="goods-box-single">
						<image class="goods-img" :src="item.productThumbnail" mode="aspectFill"></image>
						<view class="right">
							<text class="title more-t">{{item.productName}}</text>
							<text class="attr-box"> x {{item.num}}</text>
							<text class="price">{{item.price}}</text>
						</view>
					</view>
					<view class="bottom">
						<view class="time-text">{{item.createTime}}</view>
						<view class="price-box" v-if="item.type==='1'">
							共
							<text class="num">{{item.num}}</text>
							件商品 退款
							<text class="price">{{(item.price*item.num).toFixed(2)}}</text>
						</view>
					</view>
					<view class="action-box b-t">
						<button class="action-btn" v-if="item.status==='3'" @click.stop="delivery(item.sn)">发货</button>
						<button class="action-btn" v-if="item.status ==='9'||item.status==='10'" @click.stop="beforeConfirm(item)">确认收货</button>
						<button class="action-btn" v-if="(item.status ==='9'||item.status==='10')&&item.deliveryType !==''" @click.stop="getLogs(item)">查看物流</button>
						<button class="action-btn" v-if="item.status==='1'" @click.stop="openPopup(item,'cancel')">取消</button>
						<button class="action-btn recom" @click.stop="toDetail(item)">查看</button>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
		<uni-popup ref="showcancel" :type="type" :mask-click="false">
			<view class="uni-tip">
				<text class="uni-tip-title">取消售后单</text>
				<view class="popup-content uni-tip-content">
					<view class="order-info">售后单id：{{curOrder.id}}</view>
					<textarea class="cancel-reason" placeholder-class="ph" placeholder="请输入取消原因" v-model="cancelReason" />
					</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="close('cancel')">取消</text>
					<text class="uni-tip-button confirm" @click="cancelOrder()">确定</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="showconfirm" :type="type" :mask-click="false">
			<view class="uni-tip">
				<text class="uni-tip-title">提示</text>
				<text class="uni-tip-content">请确认是否已收到货？</text>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="close('confirm')">取消</text>
					<text class="uni-tip-button confirm" @click="confirmReceive()">确定</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="showlog" :type="type" :mask-click="false">
			<view class="uni-tip">
				<text class="uni-tip-title" style="margin-bottom: 0;">发货信息</text>
				<view class="uni-tip-content log-content" style="padding-bottom: 0;">
					<view class="tabs">
						<view class="tab-item" @click="logTabIndex=index" :class="{current: logTabIndex === index}" v-for="(item,index) in logisticsList">
							物流{{index+1}}
						</view>
					</view>
					<swiper :current="logTabIndex" class="swiper-area" duration="300" @change="changeLogTab">
						<swiper-item class="s-item" v-for="(item,index) in logisticsList" :key="index">
							<scroll-view scroll-y style="height: 100%;">
							<view class="c-line">发货方式：{{dictData[item.deliveryType]}}</view>
							<view class="p-line">
								<view class="left-side">发货商品：</view>
								<view class="right-side">
									<view class="right-item">
										<text>{{item.productName}} x {{item.num}}</text>
									</view>
								</view>
							</view>
							<view class="c-line" v-if="item.deliveryType==='1'">物流公司：{{item.expressCompanyName}}</view>
							<view class="c-line" v-if="item.deliveryType==='1'">物流单号：{{item.expressCode}}</view>
							<view class="p-line" v-if="item.deliveryType==='1'&&item.trackList.length>0">
								<view class="left-side">物流详情：</view>
								<view class="track-list">
									<view class="track-item" v-for="(track,tIndex) in item.trackList">
									</view>
								</view>
							</view>
							<view @click="clickConfirm(item)" class="btn" v-if="item.isConfirmReceipt==='0'&&!showLog">确认收货</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="close('log')">关闭</text>
				</view>
			</view>
		</uni-popup>
		<u-popup v-model="showFilter" mode="right" width="70%" class="filter">
			<view style="padding-bottom: 100rpx;">
				<view class="filter_h">
					售后时间
				</view>
				<view class="filter_w">
					<view class="filter_w_item date" :class="{active:filterParams.dateType===1}" @click="changeDate(1)">
						近1个月
					</view>
					<view class="filter_w_item date" :class="{active:filterParams.dateType===3}" @click="changeDate(3)">
						近3个月
					</view>
					<view class="filter_w_item date" :class="{active:filterParams.dateType===6}" @click="changeDate(6)">
						近6个月
					</view>
				</view>
				<view class="filter_w" style="justify-content: center;">
					<view class="filter_w_item range">
						<input placeholder="开始日期" @click="clickShowDatePicker(1)" disabled v-model="filterParams.startTime" placeholder-class="ph" />
					</view>
					<view class="filter_w_split">-</view>
					<view class="filter_w_item range">
						<input placeholder="结束日期" @click="clickShowDatePicker(2)" disabled v-model="filterParams.endTime" placeholder-class="ph" />
					</view>
				</view>
				<view class="filter_h">
					售后类型
				</view>
				<view class="filter_w">
					<view class="filter_w_item" @click="changeType(status)" :class="{active:filterParams.type===status}" v-for="status in Object.keys(typeData)" :key="status">
						{{typeData[status]}}
					</view>
				</view>
				<view class="filter_h">
					售后状态
				</view>
				<view class="filter_w">
					<view class="filter_w_item" @click="changeStatus(status)" :class="{active:filterParams.status===status}" v-for="status in Object.keys(statusData)" :key="status">
						{{statusData[status]}}
					</view>
				</view>
			</view>
			<view class="filter_b">
				<u-button size="medium" @click="resetFilterParams">重置</u-button>
				<u-button size="medium" type="error" @click="confirmFilterParams">确认</u-button>
			</view>
		</u-popup>
		<u-picker v-model="showDatePicker" mode="time" :params="dateParams" safe-area-inset-bottom :defaultTime="computedDefaultTime" @confirm="confirmDate"></u-picker>
		<online-service v-if="isShowCustomerService" is-platform></online-service>
	</view>
</template>

<script>
	import OnlineService from '../../components/online-service/online-service.vue'
	import moment from 'moment'
	import MySearchHeader from '@/components/my-search-header/my-search-header.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import empty from "@/components/empty";
	import {
		getAfterSaleList,
		getDict,
		cancelAftersale
	} from '../../api/order/order.js'
	import{
		confirmReceipt,
		getLogistics
	} from '../../api/aftersale/aftersale.js'
	import {listCustomerGroupBySupplierId} from '@/api/user/user.js'
	import { onlineService } from '../../api/index';
	export default {
		components: {
			uniLoadMore,
			empty,
			uniPopup,
			MySearchHeader,
			OnlineService
		},
		data() {
			return {
				page: 1,
				limit: 10,
				afterSaleList: [],
				loadingType: 'more',
				curOrder: {},
				cancelReason:'',
				type: 'center',
				logisticsList:[],
				logTabIndex:0,
				dictData:{},
				statusData:{},
				typeData:{},
				showLog:false,
				// 筛选弹窗
				showFilter:false,
				// 搜索key
				keyword:'',// 筛选参数
				filterParams:{
					startTime: '',
					endTime: '',
					date:[],
					status:'',
					type:'',
					dateType:-1,
					pickerType:1,
				},
				oldFilterParams:{
					startTime: '',
					endTime: '',
					date:[],
					status:'',
					type:'',
					dateType:-1,
					pickerType:1,
				},
				searchParams:{},
				// 下单时间选择器
				showDatePicker:false,
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				// 供应商在线客服map
				supplierCustomerGroup:{},
				// 是否显示客服
				isShowCustomerService: 0,
			}
		},
		onLoad(options) {
			// 初始化是否显示客服
			this.isShowCustomerService = uni.getStorageSync('isShowCustomerService')
			  ? Number(uni.getStorageSync('isShowCustomerService')) : 1
			this.loadData()
			this.loadDictData()
		},
		onShow() {
			if (getApp().globalData.fromAftersaleSearch) {
				this.keyword = getApp().globalData.aftersaleSearchKey
				this.page = 1
				uni.pageScrollTo({
					scrollTop:0,
					duration:300
				})
				this.loadData()
				getApp().globalData.fromAftersaleSearch = 0
			}
		},
		computed:{
			computedDefaultTime(){
				const map = {
					1:'startTime',
					2:'endTime'
				}
				return this.filterParams[map[this.filterParams.pickerType]]
			}
		},
		onReachBottom() {
			this.loadData()
		},
		methods: {
			toService(order,supplierId){
				let content = `售后单号:${order.sn}\n供应商售后单号:${order.supplierSn}\n售后金额:${order.subAmount}\n售后商品:`+order.productName
				onlineService({ "type": "order", "content": content,"vendorId": this.supplierCustomerGroup[supplierId]}).then(res=>{
					if(res.code === 0){
						window.location.href=res.data
					}
				})
			},
			getSupplierCustomerGroup(ids){
				ids = [...new Set(ids)]
				ids.forEach(id => {
					listCustomerGroupBySupplierId({}, 'supplierIds[]=' + id).then(res => {
						if (res.code === 0) {
							this.supplierCustomerGroup = {
								...this.supplierCustomerGroup,
								...res.data
							}
						}
					})
				})
			},
			loadData() {
				if (this.loadingType === 'loading') {
					return;
				}
				this.loadingType = 'loading';
				let total = 0;
				let list = [];
				const param = {
					page: this.page,
					limit: this.limit,
					orderType: "",
					deptIds: null,
					pageType: 1,
					createTime: "",
					orderCompleteAt: "",
					keyword:this.keyword,
					...this.searchParams
				}
				//type 1 退货 2 换货
				getAfterSaleList(param).then(res => {
					if (res.code === 0) {
						list = res.data.records;
						if(this.page===1){
							this.afterSaleList=list
						}else{
							this.afterSaleList=this.afterSaleList.concat(list)
						}
						total = parseInt(res.data.total);
						if (this.afterSaleList.length >= total) {
							this.loadingType = 'noMore';
						} else {
							this.loadingType = 'more';
						}
						this.page++;
						this.getSupplierCustomerGroup(list.map(i=>i.supplierId))
					} else {
						this.toast(res.message)
						this.loadingType = 'more';
					}
				})
			},
			loadDictData() {
				const param = {
					data: '["DELIVERY_TYPE","SALE_AFTER_TYPE","SALE_AFTER_STATUS"]'
				}
				getDict(param).then(res => {
					if (res.code === 0) {
						let data = res.data.DELIVERY_TYPE
						data.forEach(item => {
							this.dictData[item.code] = item.name;
						})
						res.data.SALE_AFTER_STATUS.forEach(item=>{
							this.statusData[item.code] = item.name
						})
						res.data.SALE_AFTER_TYPE.forEach(item=>{
							this.typeData[item.code] = item.name
						})
					} else {
						this.$util.msg(res.message)
					}
				})
			},
			toast(msg) {
				uni.showToast({
					title: msg,
					duration: 1200,
					mask: false,
					icon: 'none'
				});
			},
			toDetail(item) {
				let sn = item.sn
				uni.navigateTo({
					url: `/pages/aftersale/detail?sn=${sn}`
				})
			},
			openPopup(item, type) {
				this.curOrder = item;
				this.service('center', type)
			},
			// 关闭弹窗
			close(type) {
				this.$refs['show' + type].close();
				this.curOrder={}
				this.cancelReason=''
				this.showLog=false
			},
			service(type, open) {
				this.type = type;
				this.$nextTick(() => {
					this.$refs['show' + open].open();
				})
			},
			changeLogTab(e){
				this.logTabIndex = e.target.current
			},
			// 取消售后单
			cancelOrder() {
				if(!this.cancelReason){
					this.$util.msg('请填写取消原因！')
					return;
				}
				const params = {
				sn: this.curOrder.sn,
				reason: this.cancelReason,
				}
				cancelAftersale(params).then(res => {
					if(res.code===0){
						this.$util.msg('取消成功')
						this.cancelReason = ''
						this.curOrder = {}
						this.page=1
						this.loadData()
						setTimeout( () => {
							this.close('cancel')
						}, 600)
					}else{
						this.$util.msg(res.message)
					}
				})
			},
			// 发货
			delivery(sn){
				console.log('----',sn)
				uni.navigateTo({
					// url: `/pages/aftersale/delivery?sn=${sn}`
					url:`/pages/deliver/deliverGood?sn=${sn}`
				})
			},
			// 点击确认收货
			beforeConfirm(item){
				uni.showLoading({
					title:'加载中'
				})
				const param = {
					saleAfterId: item.id
				}
				getLogistics(param).then(res => {
					uni.hideLoading()
					if (res.code === 0){
						this.logisticsList = res.data;
						if (this.logisticsList.length === 1 && item.status === '10'){
							this.openPopup(item,'confirm')
						}else {
							this.openPopup(item,'log')
						}
					}
				})
			},
			// 查看物流
			getLogs(item){	
				const param = {
					saleAfterId: item.id
				}	
				getLogistics(param).then(res => {
					uni.hideLoading()
					if (res.code === 0){
						this.logisticsList = res.data;
							this.openPopup(item,'log')
							this.showLog=true
					}
				})
			},
			// 确认收货
			confirmReceive(){
				let saleAfterId = this.logisticsList[0].saleAfterId;
				let outgoingCode = this.logisticsList[0].outgoingCode;
				uni.showLoading({
					title: '请稍后',
				})
				const params = {
					saleAfterId: saleAfterId,
					outgoingCode: outgoingCode
				}
				confirmReceipt(params).then(res => {
					if (res.code === 0){
						uni.hideLoading();
						this.$util.msg('确认收货成功!')
						this.curOrder = {}
						this.page=1
						setTimeout( () => {
							this.close('confirm')
						}, 600)
						this.loadData()
					}else {
						this.$util.msg(res.message)
						uni.hideLoading();
					}
				})
			},
			// 物流信息里确认收货
			clickConfirm(item){
				uni.showModal({
					title: '提示',
					content: '请确认是否已收到货？',
					confirmColor: '#fa436a',
					success: suc => {
						if (suc.confirm) {
							confirmReceipt({
								saleAfterId: item.saleAfterId,
								outgoingCode: item.outgoingCode
							}).then(res => {
								if (res.code === 0) {
									this.$util.msg('确认收货成功!')
									this.curOrder = {}
									this.page=1
									setTimeout( () => {
										this.close('log')
									}, 600)
									this.loadData()
								} else {
									this.$util.msg(res.message)
								}
							})
						}
					}
				})
			},
			clickBack(){
				uni.navigateBack()
			},
			// 搜索
			toSearch() {
				uni.navigateTo({
					url: '/pages/order/search?from=aftersale&key=' + this.keyword
				})
			},
			// 筛选面板
			clickShowFilter(){
				this.showFilter=!this.showFilter
				if(this.showFilter){
					this.filterParams = JSON.parse(JSON.stringify(this.oldFilterParams))
				}
			},
			// 筛选-售后类型
			changeType(code){
				if(this.filterParams.type===code){
					this.filterParams.type = ''
				}else{
					this.filterParams.type = code
				}
			},
			// 筛选-售后状态
			changeStatus(code){
				if(this.filterParams.status===code){
					this.filterParams.status = ''
				}else{
					this.filterParams.status = code
				}
			},
			// 筛选-售后时间
			changeDate(type){
				if(type===this.filterParams.dateType){
					this.filterParams.dateType = -1
					this.filterParams.date = []
					return
				}
				this.filterParams.dateType = type
				if(type>0){
					this.filterParams.startTime = ''
					this.filterParams.endTime = ''
					this.filterParams.date = [moment().subtract(type, 'month').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
				}else{
					this.filterParams.date = []
				}
				this.$forceUpdate()
			},
			// 售后时间选择器 type:1 开始日期 - 2 结束日期
			clickShowDatePicker(type){
				this.filterParams.pickerType = type
				this.showDatePicker = true
			},
			confirmDate(e){
				const map = {
					1:'startTime',
					2:'endTime'
				}
				this.filterParams[map[this.filterParams.pickerType]] = e.year+'-'+e.month+'-'+e.day
				this.changeDate(-1)
			},
			// 重置筛选
			resetFilterParams(){
				this.filterParams.startTime = ''
				this.filterParams.endTime = ''
				this.filterParams.date = []
				this.filterParams.dateType = -1
				this.filterParams.pickerType = 1
				this.filterParams.status = ''
				this.filterParams.type = ''
				this.searchParams = {}
				this.$forceUpdate()
				// this.filterParams = this.oldFilterParams
			},
			// 确认筛选
			confirmFilterParams(){
				let startTime = this.filterParams.date.length>0?this.filterParams.date[0]:this.filterParams.startTime?this.filterParams.startTime:''
				let endTime = this.filterParams.date.length>1?this.filterParams.date[1]:this.filterParams.endTime?this.filterParams.endTime:''
				const createTime = [startTime?startTime+' 00:00:00':'',endTime?endTime+' 23:59:59':''].join(',')
				const params = {
					createTime:createTime==','?null:createTime,
					status:this.filterParams.status||null,
					type:this.filterParams.type||null
				}
				this.oldFilterParams = JSON.parse(JSON.stringify(this.filterParams))
				this.showFilter = false
				this.page = 1
				this.searchParams = params
				this.loadData()
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.list-scroll-content {
		height: 100%;
	}

	// .time-text {
	// 	font-size: 14px;
	// 	float: left;
	// 	position: absolute;
	// 	left: 5px;
	// }
	
	.uni-tip {
		overflow: hidden;
		.log-content{
			.tabs{
				display: flex;
				// height: 30px;
				width: 100%;
				.tab-item{
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					font-size: 13px;
					color: $font-color-dark;
					position: relative;
					padding-bottom: 10rpx;
		
					&.current {
						color: $base-color;
						&:after {
							content: '';
							position: absolute;
							left: 50%;
							bottom: 0;
							transform: translateX(-50%);
							width: 34px;
							height: 0;
							border-bottom: 2px solid $base-color;
						}
					}
				}
			}
			.swiper-area{
				width: 100%;
				font-size: 13px;
				.s-item{
						background-color: #fff;
						width: 100%;
						padding: 16rpx 30rpx;
						display: flex;
						flex-direction: column;
		
						.btn {
							float: right;
							width: 160upx;
							height: 60upx;
							margin: 0 22rpx 20rpx 0;
							padding: 0;
							text-align: center;
							line-height: 60upx;
							font-size: $font-sm + 2upx;
							background: #fff9f9;
							color: $base-color;
							border-radius: 10px;
							border: 0.5px solid $base-color;
						}
		
						.c-line {
							padding: 10rpx 0;
						}
		
						.p-line {
							padding: 10rpx 0;
							display: flex;
							justify-content: flex-start;
							// align-items: center;
		
							.left-side {
								font-size: 13px;
							}
		
							.right-side {
								flex: 1;
								display: flex;
								flex-direction: column;
		
								.right-item {
									padding-bottom: 10rpx;
								}
							}
		
							.track-list {
								padding: 10rpx 0;
		
								.track-item {
									.time {}
		
									.day {}
		
									.content {}
								}
							}
						}
				}
			}
		}
		.popup-content {
			.order-info {
				color: #303133;
				margin-bottom: 16rpx;
			}
	
			.cancel-reason {
				height: 140rpx;
				min-height: 140rpx;
				width: 100%;
				max-height: 200rpx;
				padding: 16rpx;
				color: #303133;
				font-size: 14px;
				border: 1px solid #d9d9d9;
			}
			.ph{
				font-size: 14px;
				color: #666;
			}
		}
	
		.uni-tip-group-button {
			border-top: none;
	
			.uni-tip-button {
				line-height: normal;
				display: flex;
				align-items: center;
				justify-content: center;
				border-top: 1px solid #e2e2e2;
	
				&.confirm {
					border-top: 1rpx solid $base-color;
					border-bottom: 1rpx solid $base-color;
					color: #fff;
					background-color: $base-color;
				}
			}
		}
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-top: 16upx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 30upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;


			.img {
				width: 32upx;
				height: 32upx;
				margin-right: 6upx;
			}

			.time {
				flex: 1;
				width: 0;
				margin-right: 10rpx;
				display: flex;
				align-items: center;
				text{
					max-width: calc(100% - 54rpx);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 10rpx;
				}
			}

			.state {
				color: $base-color;
			}

			.yticon {
				font-size: 32upx;
				margin-right: 4upx;
				color: #fa436a;
			}

			.icon-shouhoutuikuan {
				font-size: 32upx;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20upx 0;
			align-items: center;

			.goods-img {
				display: block;
				width: 120upx;
				height: 120upx;
				background-color: #fff;
				background: url(../../static/error-img-60.png);
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;

				.title {
					font-size: $font-base;
					color: $font-color-dark;
					line-height: 42rpx;
				}

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx
				}

				.price {
					font-size: $font-base + 2upx;
					color: $font-color-dark;

					&:before {
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}
		.bottom{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20upx 30upx 20upx 0;
			
			.time-text {
				flex: 1;
				font-size: $my-font-size-middle;
			}
			
			.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			// padding: 20upx 30upx;
			font-size: $font-sm;
			color: $font-color-light;

			.num {
				margin: 0 8upx;
				color: $font-color-dark;
			}

			.price {
				font-size: $my-font-size-base;
				color: $font-color-dark;

				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
			}
		}
		}
		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: fit-content;
			min-height: 100upx;
			position: relative;
			padding-right: 30upx;
		}

		.action-btn {
			width: fit-content;
			min-width: 150upx;
			height: 60upx;
			margin: 0;
			margin-top: 10upx;
			margin-bottom: 10upx;
			margin-left: 20upx;
			padding: 0 10upx 0 10px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}

	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}

	.uni-load-more__text {
		font-size: 28upx;
		color: #999
	}

	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px
	}

	.uni-load-more__img>view {
		position: absolute
	}

	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: .2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite
	}

	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px
	}

	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0
	}

	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px
	}

	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0
	}

	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px
	}

	.load2 {
		transform: rotate(30deg)
	}

	.load3 {
		transform: rotate(60deg)
	}

	.load1 view:nth-child(1) {
		animation-delay: 0s
	}

	.load2 view:nth-child(1) {
		animation-delay: .13s
	}

	.load3 view:nth-child(1) {
		animation-delay: .26s
	}

	.load1 view:nth-child(2) {
		animation-delay: .39s
	}

	.load2 view:nth-child(2) {
		animation-delay: .52s
	}

	.load3 view:nth-child(2) {
		animation-delay: .65s
	}

	.load1 view:nth-child(3) {
		animation-delay: .78s
	}

	.load2 view:nth-child(3) {
		animation-delay: .91s
	}

	.load3 view:nth-child(3) {
		animation-delay: 1.04s
	}

	.load1 view:nth-child(4) {
		animation-delay: 1.17s
	}

	.load2 view:nth-child(4) {
		animation-delay: 1.3s
	}

	.load3 view:nth-child(4) {
		animation-delay: 1.43s
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1
		}

		100% {
			opacity: .2
		}
	}
	.filter {
		margin-top: 90rpx;
		font-size: $my-font-size-middle;
		color: #aaa;
		
		&_b{
			height: 90rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		&_h {
			padding: 20rpx 20rpx 0 20rpx;
			color: #303133;
		}
	
		&_w {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-right: 20rpx;
	
			&_split {
				line-height: 52rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;
			}
	
			&_item {
				border-radius: 30rpx;
				margin-left: 20rpx;
				margin-top: 20rpx;
				text-align: center;
				padding: 4rpx 16rpx;
				color: #aaa;
				background-color: #f2f2f2;
				line-height: 40rpx;
				border:2rpx solid transparent; 
				
				.ph{
					color: #aaa;
				}
	
				&.date {
					width: calc((100% - 60rpx) / 3);
				}
	
				&.range {
					flex: 1;
					height: 52rpx;
	
					input {
						font-size: $my-font-size-middle;
						height: 40rpx;
						line-height: 40rpx;
					}
				}
	
				&.active {
					color: #ec808d;
					border-color:#ec808d; 
					background-color: rgba(#ec808d, 0.2);
				}
			}
		}
	}
</style>
